* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    text-decoration: none;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container{
    width: 1170px;
    padding: 15px;
    margin: 0 auto;
    position: relative;
    height: 100vh;
}


.loading-div {
    width: 100%;
    height: 100vh;
    background-color: black;
}

.begin-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sr-only {
    text-align: center;
    font-size: 30px;
    color: #fff;
}


/* 背景固定 */
.testBefore{
    background-image: url("../images/wallroom-1920x1200-bg-044329e.jpg"); 
}
.fixedBg{ 
    background-image: url("../images/index.png"); 
}
.testAfter{
    background-image: url("../images/火车.png"); 
}
h1{
    display: block;
    width: max-content;
    color: #fff;
    font-size: 60px;
    line-height: 100px;
    text-align: left;
    /* 边框渐变 */
    border-bottom:10px transparent solid;;
    border-image:linear-gradient(to right,#161823,#f0fcff) 1 10;
}
.main>div{
    width: 100%;
    height: 800px;
    text-align: center;
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: cover; 
    overflow: hidden;
}



/* 固定导航栏 */
.left-nav{
    position: fixed;
    top: 0;
    left: -100vh;
    width: 400px;
    height: 0;
    transform: translate(0, 0);
    
    z-index: 100;
    /* display: none; */

 /* 设置梯形  利用边框 */
    background: transparent;
    z-index: 444;
    border-top: none;
    border-bottom: #e4e2e3 solid;
    /* border-bottom-width: medium; */
    border-right: transparent 180px solid;
    border-left: none;
    box-sizing: border-box;
    border-bottom-width: 100vh;
}
.btn-list{
    margin-top: 30vh;
    margin-left: 20px;
}
.close-nav{
    width: 60px;
    height: 60px;
    position: fixed;
    top: 50px;
    left: 50px;
    background:url(../images/关\ 闭-1.png) no-repeat center;
    background-size: 70%;
    background-color: #262833;
    border-radius: 50%;
    transition: all 1s;
    /* animation: close-nav 1s linear infinite;
    animation-play-state: paused; */
}
.close-nav:hover{
    transform: scale(1) rotate(90deg);
    background-color: #665757;
    box-shadow: 5px -5px 10px #444444;
}
.open-nav{
    width: 60px;
    height: 60px;
    position: fixed;
    top: -60px;
    left: 50px;
    background:url(../images/菜单.png) no-repeat center;
    background-size: 70%;
    background-color: #f0fcff;
    border-radius: 50%;
    transition: all 1s;
    z-index: 99;
}
.open-nav:hover{
    transform: scale(1) rotate(90deg);
    box-shadow: 5px 5px 10px #444444,
    -5px -5px 10px #444444;
}
.marker{
    width: max-content;
    height: max-content;
    position: fixed;
    top: 90vh;
    left: 50px;
}
.marker>p{
    width: 60px;
    height: 60px;
    float: left;
    background:url(../images/B3EF8028E833770E2A3CFD6C46BE8A5C.jpg) no-repeat center;
    background-size: 100%;
    background-color: #262833;
    border-radius: 50%;
}
.marker>span{
    display: inline-block;
    line-height: 20px;
    margin: 30px 0 0 15px;
}




.left-nav>.btn-list>a{
    display: block;
    padding: 20px 0;
    line-height: 20px;
    width: 150px;
    text-align: center;
    color: #262833;
    font-size: 20PX;
    font-weight: 500;
    border-radius: 0 100px 0 100px;
}
.btn{
    position: relative;
    display: block;
    color: white;
    font-size: 14px;
    font-family: "montserrat";
    text-decoration: none;
    margin: 30px 0;
    border: 2px solid #FFF;
    padding: 14px 60px;
    text-transform: uppercase;
    overflow: hidden;
}
.btn::before{
    background: #FFF;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition: all 0.6s ease-in;
}
.btn-add{
    background-color: #fff;
}
.btn1::before{
    width: 0;
    height: 102%;
}
.btn1:hover::before{ 
    width: 100%;
}
/* .btn1:hover .left-nav a{
    color: #161823;
} */
.btn2::before{
    width: 100%;
    height: 0%;
}
.btn2:hover::before{
    height: 102%;
}
.btn3::before{
    width: 100%;
    height: 0;
    
}
.btn3:hover::before{
    height: 380%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.btn4::before{
    width: 100%;
    height: 0;
    
}
.btn4:hover::before{
    height: 380%;
    transform: translate(-50%,-50%) rotate(-45deg);
}


/* <!-- 顶部音乐 --> */
.music{
    position: fixed;
    display: flex;
    align-items: center;
    top: -90px;
    right: 40px;
    float: left;
    width: 400px;
    height: 90px;
    background: linear-gradient(#161823,#f0fcff);
    border-radius: 0 0 30px 30px;
    z-index: 99;
}

.music img{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin:0 15px;
    transform: rotate(36000deg);
}
.audio:focus{
    outline: none;
}
.bgstyle{
    position: absolute;
    top: 45px;
    left: 42px;
    transform: translate(-50%, -50%);
    height: 60px;
    width: 60px;
    border-radius: 50%;
}
.kuosan{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    background: #EAE194;
    animation: run 2s infinite;
    z-index: 90;
    /* animation-play-state: paused; */
}
@keyframes run{
    from{
        opacity: 1;
        transform: scale(1);
    }
    to{
        opacity: 0;
        transform: scale(1.2);
    }
}
.shouqi{
    margin: 0 8px;
    width: 30px;
    height: 30px;
    animation: get-up 1s infinite;
}
.fangchu{
    position: fixed;
    top: 0px;
    right: 210px;
    float: left;
    width: 60px;
    height: 30px;
    background: rgb(255, 255, 255);
    border-radius: 0 0 15px 15px;
    text-align: center;
    animation: get-up 1s infinite;
    display: none;
}
.icon-sq,.icon-xiala{
    line-height: 30px;
    text-align: center;
}
@keyframes get-up{
    from{
        opacity: 1;
        transform: translateY(5px);
    }
    to{
        opacity: 0;
        transform: translateY(-5px);
    }
}
@keyframes get-down{
    from{
        opacity: 0;
        transform: translateY(0);
    }
    to{
        opacity: 1;
        transform: translateY(3px);
    }
}


/* 关于我 */
.container-left{
    width: 400px;
    height: 600px;
}
.container-right{
    width: 770px;
    height: 600px;
}
.about-left{
    position: absolute;
    top: 150px;
    left: -100px;
    /* border: 5px solid #dfdfdf; */
    /* border-radius: 20px; */

    animation: move-right;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards; /* 最终位置 */
    animation-delay: 3s;
    /* 延迟时间 */
}
.about-right{
    position: absolute;
    top: 150px;
    right: -100px;
    /* border:5px solid #dfdfdf; */
    /* border-radius: 20px; */


    animation: move-left;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-delay: 3s;
}


.project-left{
    position: absolute;
    top: 250px;
    left: 0;
}
/* .project-top{
    position: absolute;
    top: 50px;
    right: 0;
} */

@keyframes move-left {  
    0% {opacity: 0;transform:translate(0,0)}/*初始状态 透明度为0*/  
    40% {opacity: 0;transform:translate(0,0)}/*过渡状态 透明度为0*/  
    100% {background: rgba(255,255,255,0);transform:translate(-100px,0)}/*结束状态 透明度为1*/  
}
@keyframes move-right {  
    0% {opacity: 0;transform:translate(0,0)}/*初始状态 透明度为0*/  
    40% {opacity: 0;transform:translate(0,0)}/*过渡状态 透明度为0*/  
    100% {background: rgba(0,0,0,0);transform:translate(100px,0)}/*结束状态 透明度为1*/  
}
@keyframes move-up {  
    0% {opacity: 0; transform: translate(0,100px)}/*初始状态 透明度为0*/  
    40% {opacity: 0; transform: translate(0,100px)}/*过渡状态 透明度为0*/  
    100% {opacity: 1;transform: translate(0,20px)}/*结束状态 透明度为1*/  
}
@keyframes move-down {  
    0% {opacity: 0; transform: translate(0,-100px)}/*初始状态 透明度为0*/  
    40% {opacity: 0; transform: translate(0,-100px)}/*过渡状态 透明度为0*/  
    100% {opacity: 1;transform: translate(0,20px)}/*结束状态 透明度为1*/  
}
@keyframes move-out {  
    0% {opacity: 0; }/*初始状态 透明度为0*/  
    40% {opacity: 0; }/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}

.project::after{
    content: '';
    display: table;
    clear: both;
}
.project-left{    
    background-color: turquoise;
    animation: move-up;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-play-state: paused;
} 
.project-top{    
    float: left;
    width: 10%;
    height: 300px;
    margin:0 14.625px;
    padding: 20px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid 081B2E;
    box-shadow: 5px 5px 5px #000,
    -5px -5px 10px #fff;
    font-size: 20px;
    color: #fff;
    /* transition: box-shadow 0.5s; */
    background:rgba(0,0,0,0);

    animation: move-down;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-play-state: paused;
}
.project-top:hover{
    transform: translate(8px,8px) !important;
    box-shadow:5px 5px 10px #fff,
    -5px -5px 10px #000;
}
.project-bottom{
    float: left;
    width: 100%;
    height: 200px;
    margin-top: 100px;
    padding: 20px 10px;
   
    font-size: 30px;
    color: #fff;
}
.project-bottom p:first-child{
    text-align: left;
}
.project-bottom p:last-child{
    text-align: right;
}


.testAfter-left{
    animation: move-up;/*动画名称*/
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-play-state: paused;
}
.testAfter-right{
    position: absolute;
    top: 250px;
    right: 0;
    animation: move-up;/*动画名称*/
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-play-state: paused;
}


/* 第一页内容 */
.head-icon{
    margin: 0 auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-top: 30px;
    background:url(../images/O1CN01rdsTGJ22e079zEMhr_!!31747144.jpg) no-repeat;
    background-position: center ;
    background-size: cover;
    box-shadow:5px 5px 10px #444444;
    opacity: 1;
}
.motto{
    margin-top: 100px;
    
}
.motto p{
    margin: 0 auto;
    text-indent: 2em;
    text-align: left;
    letter-spacing: 4px;
    width: 70%;
    line-height: 30px;
    font-size: 22px;
    color: #3d3b4f;
}


.imformation::after{
    content: "";
    display: table;
    clear: both;
}
.imformation>div{
    float: left;
    box-sizing: border-box;
    padding: 30px;
    overflow: hidden;
    background: rgba(255,255,255,0.5);
    transition: all 0.5s;

    border: 1px solid #DFDFDF;
    margin: 0 0 -1PX -1px;
}
.imformation>div:hover{
    transform: translate(-8px,-8px);
    box-shadow:5px 5px 10px #444444;
}
.typeOne{
    width: 33.3333%;

}
.typeTow{
    width: 66.6666%;
}
.typeThree{
    width: 100%;
    height: max-content;
}
.typeOne>p,.typeTow>p{
    float: left;
}
.imformation>div>p:first-child{
    width: max-content;
    color: black;
    font-size: 24px;
}
.imformation>div>p:last-child{
    width: max-content;
    color: #262833;
    font-size: 24px;
}

.typeThree span{
    display: block;
    color: #262833;
    font-size: 24px;
    text-indent: 2em;
    text-align: left;
}
.project-top p:last-child{
    transition: all 1s;
    opacity: 0;
    height: 90px;
    width: 97px;
    margin-top: 120px;
    
    background-position: center;
    background-size: contain;
}
.project-top p:last-child:hover{
    transform: scale(4);
}

.project-top:hover .project-img{
    opacity: 1;
}
.img-One{
    background: url(../images/小米登录.png) no-repeat;
}
.img-Two{
    background: url(../images/百度.png) no-repeat;
}
.img-Three{
    background: url(../images/家居医生个人中心.png) no-repeat;
}
.img-Four{
    background: url(../images/家具医生建材测评.png) no-repeat;
}
.img-Five{
    background: url(../images/小米商城官网.png) no-repeat;
}
.img-Six{
    background: url(../images/光谷.png) no-repeat;
}
.img-Seven{
    background: url(../images/网易云.png) no-repeat;
}
.img-Eight{
    background: url(../images/语雀.png) no-repeat;
}
.img-Nine{
    background: url(../images/木兮地板.png) no-repeat;
}



/* 第三页内容 */
.others-msg{
    /* width: max-content; */
    margin: 0 auto;
    width: max-content;
    margin-top:60px;

    animation: move-up;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/   
    animation-fill-mode: forwards;
    animation-play-state: paused;
}
.msg-top{
    width: 200px;
    height: max-content;
    overflow: hidden;
}
.msg-top>p{
    line-height: 90px;
    float: left;
    font-size: 25px;
    color: #ffd200;
    text-align: center;
}
.msg-top>div{
    padding: 20px 0;
    width: 90px;
    height: 90px;
    font-size: 25px;
    line-height: 20px;
    font-weight: bold;
    font-family: "微软雅黑";
    text-align: center;
    color: #6bc30d;
    float: right;
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid #d7d8d8;
    cursor: pointer;
    transition: all 1s;
}
.msg-top>div:hover{
    background: url(../images/关机.png) center;
    background-size: contain;
    background-color:  #6bc30d;
    transform: rotate(360deg);
}
.msg-top>div:hover p{
    display: none;
}


.msg-body::after{
    content: '';
    display: table;
    clear: both;
}
.msg-bodyleft{
    width: 159px;
    height: 400px;
    float: left;
    box-sizing: border-box;
    border-right: 8px solid #d7d8d8;
    
}
.msg-bodyleft::before{
    content: '';
    display: table;
}
.msg-bodyleft>.time>p{
    position: absolute;
    top: 20px;
    right: 30px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    box-sizing: border-box;
}
.icon-qq-copy,.icon-weixin,.icon-git{
    font-size: 60px !important;
    color: #fff;

}
.timeOne:hover .icon-qq-copy{
    color: #1296DB !important;
}
.timeTwo:hover .icon-weixin{
    color: #0DD11C !important;
}
.timeThree:hover .icon-git{
    color: #004098 !important;
}
.time:hover .abc{
    display: block;
}
.time:hover .showQc{
    display: block;
}

.time{
    position: relative;
    height: 100px;
}
.spot{
    position: absolute;;
    top: 51px;
    left: 155px;
    width: 20px;
    height: 20px;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 50%;
    border: 2px solid #6bc30d;
    transition: all 0.3s ease;
}
.spot-get{
    border: 10px solid #6bc30d;
}
.spot:hover,.time:hover .spot{
    border: 10px solid #6bc30d;
    cursor: pointer;
}

.msg-bodyright{
    float: left;
    position: relative;
    overflow: hidden;
    height:400px;
    width: 400px;
}
.abc{
    position: absolute;
    top: 30px;
    left: 180px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: none;
    border-right: 20px solid #fff;
    display: none;
}
.abc:hover .spot{
    border: 10px solid #6bc30d;
    cursor: pointer;
}
.showQc{
    position: absolute;
    top: 20px;
    left: 40px;
    width: 300px;
    height: 300px;
    
    display: none;
    box-sizing: border-box;
    padding: 15px;
}
.showQc-one{
    background: url(../images/QQ.jpg) no-repeat center;
    background-size: cover;
}
.showQc-two{
    background: url(../images/wechat\ .jpg) no-repeat center;
    background-size: cover;
}
.showQc-three{
    background: url(../images/gitQR.png) no-repeat center;
    background-size: cover;
}
